<template>
  <ScreenLayout>
    <div class="page-wrap">
      <div class="top-row">
        <div class="cell">
          <DCard
            title="示波器"
            :headerStyle="{
              'background-size': 'contain',
              'background-repeat': 'no-repeat'
            }"
          >
            <SelectLineChart v-model="leftForm" />
          </DCard>
        </div>
        <div class="cell">
          <DCard
            title="示波器"
            :headerStyle="{
              'background-size': 'contain',
              'background-repeat': 'no-repeat'
            }"
          >
            <SelectLineChart v-model="rightForm" />
          </DCard>
        </div>
      </div>
      <div class="bottom-row">
        <DCard
          title="风场角频率"
          :headerStyle="{
            'background-size': 'contain',
            'background-repeat': 'no-repeat'
          }"
        >
          <div class="list">
            <div class="item" v-for="(item, index) in list" :key="index">
              <img class="bg" src="@/assets/images/blue-big.png" alt="" />
              <div class="value">{{ item.value }} rad/s</div>
              <div class="label" v-html="item.label"></div>
            </div>
          </div>
        </DCard>
      </div>
    </div>
  </ScreenLayout>
</template>

<script setup name="WindFarm">
import ScreenLayout from '@/components/ScreenLayout.vue'
import DCard from '@/components/DCard.vue'
import SelectLineChart from '@/components/SelectLineChart.vue'
import CountUpVue from '@/components/CountUpVue/index.vue'
import { randomLenNum } from '@/utils/index.js'
import { getFcJpl } from '@/api/base.js'

import useAppStore from '@/store/modules/app'
const appStore = useAppStore()

const leftForm = ref(['98', '106', '114', '122'])
const rightForm = ref(['99', '100', '101'])

const list = ref([])

const init = () => {
  const time = appStore.timePoint
  // 模拟接口获取数据

  getFcJpl({ time: time }).then(res => {
    if (res.code == '0000') {
      list.value = res.data
    }
  })
}
init()

watch(
  () => appStore.timePoint,
  () => {
    init()
  }
)
</script>

<style lang="scss" scoped>
// 循环旋转动画
@keyframes rotate {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }

  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}

.page-wrap {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;

  .top-row {
    width: 100%;
    height: 70%;
    display: flex;
    gap: 20px;

    .cell {
      width: 50%;
      height: 100%;
      background: linear-gradient(
        180deg,
        RGBA(6, 39, 75, 1) 0%,
        RGBA(6, 39, 75, 1) 60%,
        RGBA(6, 39, 75, 0) 100%
      );
    }
  }

  .bottom-row {
    width: calc(100% - 400px);
    height: 30%;
    margin: 0 200px;
    background: linear-gradient(
      180deg,
      RGBA(6, 39, 75, 1) 0%,
      RGBA(6, 39, 75, 1) 60%,
      RGBA(6, 39, 75, 0) 100%
    );

    .list {
      display: flex;
      justify-content: space-around;
      width: 100%;
      height: 100%;

      .item {
        flex: 1;
        height: 100%;
        position: relative;

        .bg {
          position: absolute;
          left: 60%;
          transform: translateX(-50%);
          height: 100%;
          aspect-ratio: 1/1;
          animation: rotate 10s linear infinite;
        }

        .value {
          position: absolute;
          left: 60%;
          transform: translateX(-50%);
          height: 100%;
          aspect-ratio: 1/1;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 30px;
          font-weight: bold;
        }

        .label {
          font-size: 24px;
          text-align: center;
          position: absolute;
          left: 20px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
}
</style>
